<!--
 * @Description: 朋友圈
 * @Author: Kerwin
 * @Date: 2024-09-10 17:18:14
 * @LastEditTime: 2024-10-28 15:21:35
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view class="container" @click="hideTool">
        <u-navbar title="圈子"></u-navbar>
        <view class="friendsCircle-content-item" v-for="(v, i) in content" :key="i" :data-id="v.id">
            <image class="friendsCircle-content-avatar" :src="getImgFullPath(v.user.avatar)" mode="aspectFill"
                @click="gofriend(v)"></image>
            <view class="friendsCircle-content-right">
                <view class="friendsCircle-content-nickName" @click="gofriend(v)">{{ v.user.nickname }}</view>
                <view class="friendsCircle-content-text" v-html="v.content"></view>
                <view class="friendsCircle-content-imgs" v-if="v.contentType == ContentType.IMAGE && v.files.length > 0">
                    <image :lazy-load="true" v-for="(item, ii) in v.files" :key="ii" class="friendsCircle-content-img"
                        :class="'fci' + v.files.length" :src="item" mode="aspectFill" @click="pimgs(v.files, ii)"></image>
                </view>
                <view class="friendsCircle-content-video" @click="openVideo(v)"
                    v-if="v.contentType == ContentType.VIDEO && v.files.length > 0">
                    <image :lazy-load="true" class="friendsCircle-content-video-icon" :src="icon_bf" mode="aspectFill">
                    </image>
                    <image :lazy-load="true" class="friendsCircle-content-video-img" :src="v.previewImage"
                        mode="aspectFill"></image>
                </view>
                <!-- <view class="friendsCircle-content-location" v-if="v.location.name" @click="goMap(v.location)">{{
                v.location.name }}</view> -->
                <view class="friendsCircle-content-tools">
                    <view class="friendsCircle-content-time">{{ v.createTime }}</view>
                    <view class="friendsCircle-content-tool" :class="{ tabon: i == showToolIndex }">
                        <hy-svg name="icon-diandian" width="24rpx" height="30rpx" @click.stop="showTool(i)"></hy-svg>
                        <view class="friendsCircle-content-tool-absolute">
                            <view class="friendsCircle-popup">
                                <view class="friendsCircle-popup-item" @click.stop="zan(v, i)">
                                    <hy-svg :name="v.favorited ? 'icon-zan1' : 'icon-zan'" :color="'#fff'" width="28rpx"
                                        height="28rpx" style="margin-right: 10rpx;"></hy-svg>
                                    <view class="friendsCircle-popup-text" v-if="v.favorited">取消</view>
                                    <view class="friendsCircle-popup-text" v-else>赞</view>
                                </view>
                                <view class="friendsCircle-popup-item" @click.stop="comment(v)">
                                    <hy-svg name="icon-pinglun" :color="'#fff'" width="28rpx" height="28rpx"
                                        style="margin-right: 10rpx;"></hy-svg>
                                    <view class="friendsCircle-popup-icon wxfont pinglun"></view>
                                    <view class="friendsCircle-popup-text">评论</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="friendsCircle-like" v-if="v.likeList && v.likeList.length > 0">
                    <view class="friendsCircle-like-icon wxfont zan"></view>
                    <text class="friendsCircle-like-text" v-for="(z, zindex) in v.likeList">{{ z.nickName }}</text>
                </view>
                <view class="friendsCircle-comment" v-if="v.replyList && v.replyList.length > 0">
                    <template v-for="(c, ci) in v.replyList" :key="rindex">
                        <view class="friendsCircle-comment-item">
                            <text class="friendsCircle-comment-text" @click="gofriend(c)">{{ c?.user?.nickname }}</text>
                            <view class="friendsCircle-comment-content" @click="replyclick(c, ci, i)">
                                <text>：{{ c?.name }}</text>
                            </view>
                        </view>
                        <template v-if="c.childList && c.childList.length > 0">
                            <view class="friendsCircle-comment-feedback" v-for="(cc, cci) in c.childList" :key="cci">
                                <text class="friendsCircle-comment-text" @click="gofriend(cc)">{{ cc?.user?.nickname
                                }}</text>
                                回复
                                <text class="friendsCircle-comment-text" @click="gofriend(cc)">{{ c?.user?.nickname
                                }}</text>
                                <view class="friendsCircle-comment-content" @click="replyclick(cc, cci, i)">
                                    <text>：{{ cc?.name }}</text>
                                </view>
                            </view>
                        </template>
                    </template>
                </view>
            </view>
        </view>
        <view class="zfb-tk-send-tool" v-if="toggleMsgBox" :style="{ bottom: keyboardHeight + 'px' }">
            <form @submit.stop="sendMsg(msg)">
                <view class="zfb-tk-send-tool-c">
                    <view class="zfb-tk-send-tool-input-box" @click.stop="msgFocus = true">
                        <textarea class="zfb-tk-send-tool-input" :adjust-position="false" :focus="msgFocus" v-model="msg"
                            :placeholder="placeholder" confirm-type="send" @confirm.stop="sendMsg(msg)" hold-keyboard
                            :maxlength="-1" auto-height />
                    </view>
                    <view class="zfb-tk-send-tool-text" @click.stop="sendMsg(msg)"
                        :style="{ background: msg !== '' ? '#1BC418' : '#F7F7F7', color: msg !== '' ? '#fff' : '#ddd', 'border-color': msg !== '' ? '#1BC418' : '#ddd' }">
                        发送</view>
                </view>
            </form>
        </view>
        <c_videoBox ref="videoBoxRef" />
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { socialApi } from '@/api';
import icon_bf from "../../static/img/bf.png"
import { getImgFullPath } from '@/utils';
import { timeDetia } from '@/utils/common';
import c_videoBox from './c_videoBox.vue'
import { resolve } from 'path';
import { useUserStore } from '@/store'

const userStore = useUserStore()
const keyboardHeight = ref(0)
const msg = ref('')
const msgFocus = ref(false)
const toggleMsgBox = ref(false)
const showToolIndex = ref(null)
const chooseUserIndex = ref(null)
const type = ref('msg')
const placeholder = ref('评论')
const replydata = ref('')
const videoBoxRef = ref()
interface Dynamic {
    id: number
    userId: number
    videoUrl: string
    contentType: number
    type: number
    content: string
    previewImage?: string
    user: {
        nickname: string
        username: string
        avatar: string
    }
    favorited: boolean
    createTime: number | string
    files: string[]
    location: any,
    replyList: any,
}
enum ContentType {
    IMAGE = 1,
    AUDIO = 2,
    VIDEO = 3,
}
const content = ref<Dynamic[]>([])

function replyclick(e: { canDeleted: string; content: any; replyId: string; user: any; }, ci: any, i: string | number) {
    chooseUserIndex.value = i
    if (e.canDeleted == 'Y') {
        hidenTool()
        uni.showActionSheet({
            itemList: ['复制', '删除'],
            success: (res: { tapIndex: any; }) => {
                switch (res.tapIndex) {
                    case 0:
                        uni.setClipboardData({
                            data: e.content,
                            success: function () {
                                uni.showToast({
                                    title: '复制成功',
                                    icon: 'none',
                                    position: 'bottom'
                                })
                            }
                        });
                        break;
                    case 1:
                        this.$http.request({
                            url: '/topic/removeReply/' + e.replyId,
                            success: (res: { data: { code: number; }; }) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: '删除成功',
                                        icon: 'none'
                                    })
                                    this.content[i].replyList.splice(ci, 1)
                                }
                            }
                        });
                        break;
                    default:
                        break;
                }
            }
        });
    } else {
        replydata.value = e
        type.value = 'reply'
        placeholder.value = '回复' + e.user.nickname
        nextTick(() => {
            toggleMsgBox.value = true;
            msgFocus.value = true
        })
    }
}
function gofriend(e: { userId: number; }) {
    uni.navigateTo({
        url: '../../wx/personInfo/detail?param=' + e.userId
    })
}
function pimgs(arr: string[], index: number) {
    uni.previewImage({
        urls: arr,
        current: index,
        indicator: 'number'
    })
}
function goMap(e: { latitude: any; longitude: any; }) {
    uni.openLocation({
        latitude: e.latitude,
        longitude: e.longitude,
        success: function () { }
    });
}
function openVideo(e: Dynamic) {
    console.log(e)
    videoBoxRef.value.open(e.files[0], e.previewImage)
}
function returnParse(txt: string) {
    return JSON.parse(txt);
}
function showTool(e: any) {
    chooseUserIndex.value = e
    if (showToolIndex.value === e) {
        showToolIndex.value = null;
    } else {
        showToolIndex.value = e;
    }
}
function hideTool() {
    showToolIndex.value = null;
    toggleMsgBox.value = false;
}
function comment(e: any) {
    //评论
    showToolIndex.value = null;
    type.value = 'msg'
    placeholder.value = '评论'
    nextTick(() => {
        toggleMsgBox.value = true;
        msgFocus.value = true
    })
}
async function zan(item: Dynamic, i: any) {//点赞
    const excutor = item.favorited
        ? socialApi.dynamicFavoriteDelete
        : socialApi.dynamicFavoriteAdd
    item.favorited = !item.favorited
    const res = await excutor({
        dynamicId: item.id,
        userId: userStore.userInfo.id
    })
    item.favorited = !item.favorited
    toggleMsgBox.value = false;
}
function sendMsg(e: any) {
    if (!e) {
        return;
    }
    var replyId = ''
    var replyType = ''
    if (type.value == 'msg') {
        replyId = content.value[chooseUserIndex.value].topicId
        replyType = '1'
    }
    if (type.value == 'reply') {
        replyId = replydata.value.replyId
        replyType = '2'
    }
    // this.$http.request({
    //     url: '/topic/reply',
    //     method: 'POST',
    //     data: JSON.stringify({
    //         replyId: replyId,
    //         replyType: replyType,
    //         content: e
    //     }),
    //     success: (res: { data: { code: number; data: any; }; }) => {
    //         if (res.data.code == 200) {
    //             this.hidenTool()
    //             this.content[this.chooseUserIndex].replyList.push(res.data.data)
    //         }
    //     }
    // });
    msg.value = ''
}
function hidenTool() {//隐藏选项和输入框
    showToolIndex.value = null;
    toggleMsgBox.value = false;
}
const pageData = reactive({
    pageSize: 10,
    pageIndex: 1,
    finished: false,
})
async function getData() {
    if (pageData.finished) return
    const { data } = await socialApi.dynamicList({
        ...pageData,
        detail: true
    })
    const { records, pages, current } = data
    formatData(records)
    if (records) {
        await getRecordComment(records)
    }
    content.value.push(...records)
    if (current < pages) {
        pageData.pageIndex = current + 1
    } else {
        pageData.finished = true
    }
}
function formatData(arr: Dynamic[]) {
    arr.forEach(item => {
        item.files = item.videoUrl.split(',').map(url => getImgFullPath(url) || '')
        item.previewImage && (item.previewImage = getImgFullPath(item.previewImage) || '')
        item.createTime = timeDetia(item.createTime as number * 1000)
    })
}
async function getRecordComment(arr: Dynamic[]) {
    if (arr.length == 0) return
    const p_arr = arr.map(item => {
        return socialApi.dynamicCommentListWithChild({
            dynamicId: item.id,
            noPaging: true,
            sortJson: '[{"column":"createTime","direction":"DESC"}]',
            detail: true
        }).then((res: { data: any; }) => {
            item.replyList = res.data
        })
    })
    return await Promise.all(p_arr)
}
onLoad(() => {
    getData()
})
onReachBottom(() => {
    getData()
})
</script>

<style scoped lang="scss">
.container {
    min-height: 100vh;
    background: #fff;
}

.zfb-tk-send-tool {
    background: #f7f7f7;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.zfb-tk-send-tool-c {
    padding: 16rpx 12rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border: 1px #ddd solid;
    border-left: none;
    border-right: none;
}

.zfb-tk-send-tool-c .zfb-tk-send-tool-btn {
    transition: color 0.5s;
}

.zfb-tk-send-tool .zfb-tk-send-tool-input {
    padding: 0 24rpx;
    box-sizing: border-box !important;
    width: 100%;
    background: #fff;
}

.zfb-tk-send-tool-text {
    white-space: nowrap;
    padding: 10rpx 24rpx;
    border-radius: 12rpx;
    border: 1px #ddd solid;
    background: #f7f7f7;
    color: #ddd;
}

.friendsCircle-content-item {
    display: flex;
    flex-direction: row;
    padding: 24rpx 34rpx;
    border-bottom: 1px #F2F2F2 solid;
}

.friendsCircle-content-avatar {
    border-radius: 10rpx;
    width: 90rpx;
    height: 90rpx;
    min-width: 90rpx;
}

.friendsCircle-content-right {
    display: flex;
    flex-direction: column;
    padding-left: 18rpx;
    flex: 1;
    box-sizing: border-box;
}

.friendsCircle-content-nickName {
    font-size: 32rpx;
    color: #5F698C;
    margin-bottom: 10rpx;
}

.friendsCircle-content-text {
    font-size: 32rpx;
    color: #333;
}

.friendsCircle-content-imgs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
    margin-top: 24rpx;
}

.friendsCircle-content-img {
    max-width: 100%;
}

.friendsCircle-content-img.fci1 {
    height: 550rpx;
    max-width: 500rpx;
    margin-right: 5px;
}

.friendsCircle-content-img.fci2 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci2:nth-child(3n) {
    margin-right: 0;
}

.friendsCircle-content-img.fci3 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci3:nth-child(3n) {
    margin-right: 0;
}

.friendsCircle-content-img.fci4 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci4:nth-child(2n) {
    margin-right: 185rpx;
}

.friendsCircle-content-img.fci5 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci5:nth-child(3n) {
    margin-right: 0;
}

.friendsCircle-content-img.fci6 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci6:nth-child(3n) {
    margin-right: 0;
}

.friendsCircle-content-img.fci7 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci7:nth-child(3n) {
    margin-right: 0;
}

.friendsCircle-content-img.fci8 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci8:nth-child(3n) {
    margin-right: 0;
}

.friendsCircle-content-img.fci9 {
    width: 185rpx;
    height: 185rpx;
    margin-right: 5rpx;
    margin-bottom: 5rpx;
}

.friendsCircle-content-img.fci9:nth-child(3n) {
    margin-right: 0;
}

.friendsCircle-content-location {
    font-size: 24rpx;
    color: #5F698C;
    margin-top: 12rpx;
}

.friendsCircle-content-time {
    font-size: 24rpx;
    color: #666666;
    margin-right: auto;
}

.friendsCircle-content-tools {
    margin-top: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 14rpx;
}

.friendsCircle-content-tool {
    padding: 4rpx 16rpx;
    border-radius: 10rpx;
    background-color: #F8F8FA;
    color: #63678C;
    display: flex;
    flex-direction: row;
    position: relative;

}


.friendsCircle-content-tool-absolute {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-100%);
    /* Start in view */
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    z-index: -1;
}

.tabon .friendsCircle-content-tool-absolute {
    z-index: 1;
    opacity: 1;
    transform: translateY(-50%) translateX(-110%);
    /* Slide out to the left */
}



.friendsCircle-popup {
    margin-right: 24rpx;
    border-radius: 12rpx;
    background-color: rgba(0, 0, 0, 0.7);
    height: 75rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 24rpx;
}

.friendsCircle-popup-item {
    color: #fff;
    padding: 0 25rpx;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.friendsCircle-popup-item:nth-child(1):active .friendsCircle-popup-icon {
    font-size: 56rpx;
}

.friendsCircle-popup-icon {
    font-size: 46rpx;
}

.friendsCircle-popup-text {
    white-space: nowrap;
}

.friendsCircle-like {
    border-radius: 8rpx;
    padding: 12rpx;
    background-color: #F7F7F7;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1px;
}

.friendsCircle-like-icon,
.friendsCircle-like-text,
.friendsCircle-comment-text {
    color: #5F698C !important;
    font-size: 28rpx;
}

.friendsCircle-comment-feedback .friendsCircle-comment-text {
    margin: 0 6rpx;

    &::after {
        content: "";
    }
}

.friendsCircle-comment-text::after {
    // content: ":";
    color: #333;
}

.friendsCircle-like-text {
    margin-left: 4rpx;
    margin-right: 10rpx;
}

.friendsCircle-like-text::after {
    content: ",";
}

.friendsCircle-like-text:nth-last-child(1)::after {
    content: "";
}

.friendsCircle-comment {
    background-color: #F7F7F7;
    border-radius: 8rpx;
}

.friendsCircle-comment-item {
    line-height: 40rpx;
    font-size: 28rpx;
    // padding: 12rpx;
    white-space: pre-wrap;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.friendsCircle-comment-feedback {
    line-height: 40rpx;
    font-size: 28rpx;
    // padding: 12rpx;
    white-space: pre-wrap;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.friendsCircle-content-video {
    width: auto;
    height: 550rpx;
    max-width: 400rpx;
    position: relative;
    margin-top: 24rpx;
}

.friendsCircle-content-video-img {
    width: 100%;
    height: 100%;
}

.friendsCircle-content-video-icon {
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80rpx !important;
    height: 80rpx !important;
    transform: translate(-50%, -50%);
}

.friendsCircle-comment-content {}

.friendsCircle-comment-content text {
    word-break: break-all;
}

.zfb-tk-send-tool-input-box {
    overflow: auto;
    width: 100%;
    margin: 0 12rpx;
    min-height: 75rpx;
    background-color: #fff;
    border-radius: 24rpx;
    padding-top: 18rpx;
    max-height: 225rpx;
    box-sizing: border-box;
}
</style>
